<template>
  <view class="pages">
    <view class="scroll-box">
      <!-- 标题 -->
      <nav-custom></nav-custom>
      <!-- 轮播图 -->
      <swiper class="banner">
        <swiper-item v-for="(item, index) in banner" :key="item.id" @click="gotoDetail">
          <view class="swiper-item">
            <image class="swiperImg" :src="item.img" :data-id="item.id"></image>
          </view>
        </swiper-item>
      </swiper>
      <!-- 本季推荐 -->
      <home-title title="本季推荐" en-title="Seasonal Recommend"></home-title>
      <scroll-view scroll-x="true">
        <view class="scroll-inner" @click="gotoDetail">
          <image class="adImg"
            src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/b9d378e1be959376/d943a30b6ebdaa1a.jpg" mode="heightFix" data-id="17387"></image>
          <image class="adImg"
            src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/384958756aa24c39/a79e9f22046ab26c.jpg" mode="heightFix" data-id="11490"></image>
          <image class="adImg"
            src="https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/e06c45a0d13fa946/681400bc21dee76a.jpg" mode="heightFix" data-id="10138"></image>
        </view>
      </scroll-view>
      <!-- 推荐列表 -->
      <view class="recommendList" v-for="rec in recommendList" :key="rec.id">
        <home-title :title="rec.topTitle" :en-title="rec.enTitle"></home-title>
        <view class="rec-img" @click="gotoDetail">
          <image class="classify" :src="rec.topImg" mode="" :data-id="rec.id"></image>
        </view>
        <view class="rec-content flex flex-wrap justify-between product">
          <!-- 商品列表 -->
          <view class="rec-item" v-for="(item, index) in rec.list" :key="index">
            <goods-item :gdata="item"></goods-item>
          </view>
        </view>
      </view>
      <!-- 返回顶部按钮 -->
     <u-back-top :scroll-top="scrollTop" bottom='250rpx' right='30rpx' :iconStyle='iconStyle'></u-back-top>
    </view>
    <tab-bar tabbar="home"></tab-bar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isShow: false,
        banner: [{
          id: '18204',
          img: 'https://mcake-oss.oss-cn-hangzhou.aliyuncs.com/file/86380041b3c46c33/84fd79a26a29eaea.jpg',
        }],
        recommendList: [],
        scrollTop: 0,
        iconStyle: {
          fontSize: '32rpx',
          color: '#2c2c2c',
        }
      }
    },
    methods: {
      // handleBanner(link) {
      // 	uni.navigateTo({
      // 		url: '/pages/home/banner-ad?link=' + link
      // 	})
      // }
    },
    onPageScroll(e) {
      this.scrollTop = e.scrollTop;
    },
    onLoad() {
      // this.$get('/1.1/classes/banner').then(res => {
      // 	this.banner = res.results
      // })
      // this.$get('/1.1/classes/goods?where={"bcid":1}&limit=8&skip=0').then(res => {
      // 	this.glist = res.results
      // })
      // // 改变导航的选中样式
      // this.$store.state.nav = 0
      this.getRecommends()
    },
    onShow() {
      // this.$store.commit('handleNav', 0)
    },
    methods: {
      getRecommends() {
        this.$H.get('/1.1/classes/recommends').then(res => {
          console.log(res);
          this.recommendList = res.data.results
        })
      },
      gotoDetail(e) {
        console.log(e);
        let id = e.target.dataset.id || e.currentTarget.dataset.id
        uni.navigateTo({
          url: `/pagesA/detail/detail?id=${id}`
        })
      }
    }
  }
</script>



<style lang="scss" scoped>
  .rec-content {
    padding: 16rpx;

    .rec-item {
      margin-bottom: 20rpx;
    }
  }

  .scroll-box {
    background: #fff;
  }

  .banner {
    height: 750rpx;

    .swiper-item {
      height: 100%;

      .swiperImg {
        width: 100%;
        height: 750rpx;
      }
    }
  }

  .scroll-inner {
    white-space: nowrap;

    .adImg {
      height: 290rpx;
    }
  }

  .classify {
    height: 380rpx;
    width: 100%;
  }

  .back-top {
    width: 100rpx;
    height: 100rpx;
    background-color: #fff;
    border-radius: 50rpx;
    box-shadow: 0 0 30rpx 4rpx rgba(0, 0, 0, 0.4);
    position: fixed;
    bottom: 110rpx;
    right: 20rpx;
    text-align: center;
    line-height: 100rpx;
    z-index: 100;
  }

  .scroll-cont {
    height: 95vh;
  }

  .scroll-box {
    padding-bottom: 160rpx;
  }

  /deep/ .u-back-top {
    background-color: #ffe32a !important;
  }

  .product {
    /* #ifdef APP-PLUS */
    padding-bottom: 30rpx;
    /* #endif */
    /* #ifdef MP-WEIXIN */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: calc(env(safe-area-inset-bottom)+100rpx);
    box-sizing: content-box;
    /* #endif */
  }
</style>
